﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Column.aspx.cs" Inherits="admin_demo_chart_Column" %>

<script type="text/javascript">
    $(function () {
        $.AjaxMask({
            url: $.Api("Demo/Chart/Column"), type: "get", success: function (result) {
                result = JSON.parse(result);
                var colors = Highcharts.getOptions().colors;
                for (var i = 0; i < result.data.length; i++) {
                    result.data[i].color = colors[i];
                }
                $("#chart-column").highcharts({
                    title: { text: "<b>数据词典内容数量统计</b>" },
                    subtitle: { text: "内容少了点,对付看吧" },
                    chart: { type: "column" },
                    xAxis: { categories: result.categories },
                    yAxis: { min: 0, title: { text: "内容数量" } },
                    tooltip: {
                        headerFormat: "<span style='font-size:10px'>{point.key}</span>",
                        pointFormat: "<br/>{series.name}: <b>{point.y}项</b>", shared: true, useHTML: true
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2, borderWidth: 0, dataLabels: {
                                enabled: true, color: colors[6],
                                style: { fontWeight: 'bold' },
                                formatter: function () { return this.y + "项"; }
                            }
                        }
                    },
                    series: [{ name: '内容数量', data: result.data, color: "white" }]
                });
            }
        });
    });
</script>

<div class="easyui-panel" border="false" <%= AttrPanel() %> style="padding:50px;">
    <div id="chart-column" style="height:100%;"></div>
</div>
